import { Button, Card, Form, Input, message } from 'antd'
import './index.scss'
import logo from '@/assets/logo.png'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { fetchLogin } from '@/store/modules/user'

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinish = async (values) => {
    console.log(values)
    await dispatch(fetchLogin(values))
    navigate('/')
    message.success('登录成功')
  }
  return (
    <div className='login'>
      <Card className='login-container'>
        <img className='login-logo' src={logo} alt=''/>
        <Form onFinish={onFinish} validateTrigger="onBlur">
          <Form.Item name="mobile"
          rules={[
            {required: true, message: '请输入手机号'},
            {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'}
          ]}>
            <Input size='large' placeholder='请输入手机号' value="13800000002"/>
          </Form.Item>
          <Form.Item name="code"
          rules={[
            { required: true, message: '请输入验证码'},
          ]}>
            <Input size='large' placeholder='请输入验证码' value="246810"/>
          </Form.Item>
          <Form.Item>
            <Button type='primary' htmlType='submit' size='large' block>登录</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
export default Login
